<template>
  <div class="box">
    <div class="content">
      <div class="content-title">
        <span>{{ roomName }}</span>
        <div style="font-size: 14px">
          <span style="color: #999999">检查时间：</span>
          <span>{{ examineDate }}</span>
        </div>
      </div>
      <div class="time-option">
        <div v-for="(item, index) in tableData.itemList" :key="index" class="time-option-content">
          <div class="time-option-info">
            <div class="content-title">{{ item.superiorName }}</div>
            <ul>
              <li v-for="(ilist, i) in item.examineDetails" :key="i">
                <span class="deduct-info-title">{{ ilist.itemNames }}</span>

                <span style="display: flex; align-items: center; justify-content: center">
                  <span class="red">
                    <span v-if="ilist.examineGrade != '无'">{{ ilist.examineGrade }}</span>
                    {{ ilist.sumScore }}
                  </span>
                  <FieldTimeOutlined />
                  <span style="margin-left: 8px">{{ ilist.examineTime }}</span>
                </span>
              </li>
            </ul>
          </div>
        </div>
        <div class="time-option-content" style="margin-top: 30px">
          <div class="total">
            <div>当日合计</div>
            <div class="total-num">{{ tableData.totalMarkScore }}</div>
          </div>
          <div class="time-option-tips">注：快速打分，无打分明细 </div></div
        >
      </div>
    </div>
  </div>
</template>

<script setup>
import { FieldTimeOutlined } from '@ant-design/icons-vue';
import { onMounted, ref, watch } from 'vue';
import { useRoute, useRouter } from 'vue-router';
import { getExamineRoomDetails } from '@/api/assessment/classCollective';
import moment from 'moment';
const route = useRoute();
const router = useRouter();
const tableData = ref([]);
let roomName = route.query.roomName;
let examineDate = moment(route.query.examineDate).format('YYYY-MM-DD');

onMounted(() => {
  let obj = {
    classId: route.query.classId,
    roomId: route.query.roomId,
    examineDate: route.query.examineDate,
    itemSuperiorId: route.query.activeId
  };
  let bodySty = document.getElementById('myApp');
  bodySty.setAttribute('class', 'bodyStyle');
  getTabsList(obj);
  console.log(obj);
});
watch(
  () => route.matched,
  val => {
    if (!route.query.classId) {
      router.push('/check/classCollective/interiorDeta');
    }
  }
);
// 获取表格信息
function getTabsList(parmas) {
  getExamineRoomDetails(parmas).then(res => {
    if (res.data.code === 200) {
      tableData.value = res.data.data;
      console.log(tableData.value);
    }
  });
}
</script>

<style lang="less" scoped>
.box {
  background: #f2f2f2;
  // padding: 50px 120px 24px;
  min-height: 100vh;
  .content {
    background: #ffffff;
    border-radius: 4px;
    padding: 24px;
    &-title {
      font-size: 24px;
      font-family: Source Han Sans CN, Source Han Sans CN-Medium;
      font-weight: 500;
      color: #222222;
      margin-bottom: 16px;
      display: flex;
      align-items: center;
      justify-content: space-between;
    }
    .time-option {
      &-content {
        background: #f8f8f8;
        border-radius: 4px;
        padding: 16px;
        .time-option-info {
          .deduct-info-title {
            max-width: 90%;
          }
          .content-title {
            font-size: 16px;
            font-family: Source Han Sans CN, Source Han Sans CN-Regular;
            color: #222222;
            margin-bottom: 16px;
          }
          ul {
            li {
              padding: 12px 16px;
              font-size: 14px;
              font-family: Source Han Sans CN, Source Han Sans CN-Regular;
              color: #666666;
              display: flex;
              align-items: center;
              justify-content: space-between;
              background: #ffffff;
              border-radius: 4px;
              .red {
                color: #fe8f8f;
                margin-right: 30px;
              }
            }
            li + li {
              margin-top: 8px;
            }
          }
        }
        .total {
          padding: 12px 16px;
          font-size: 14px;
          font-family: Source Han Sans CN, Source Han Sans CN-Regular;
          color: #666666;
          display: flex;
          align-items: center;
          justify-content: flex-end;
          background: #ffffff;
          border-radius: 4px;
          .total-num {
            color: #fe8f8f;
            margin-left: 90px;
          }
        }
        .time-option-tips {
          font-size: 14px;
          font-family: Source Han Sans CN, Source Han Sans CN-Regular;
          color: #999999;
          margin-top: 10px;
          text-align: right;
        }
      }
    }
  }
}
</style>
